<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{user}}</p>
        <p>{{obj}}</p>
        <button @click='clc'>登录</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                lists: [{
                    name: "zs",
                    age: "12"
                }, {
                    name: "lisi",
                    age: "12"
                }, {
                    name: "ww",
                    age: "12"
                }, {
                    name: "ml",
                    age: "12"
                }, ],
                user: "zs",
                obj: {
                    name: "ml",
                    age: "12"
                }
            },
            methods: {
                clc() {
                    this.user = 'fdghj'
                    this.$set(this, 'user', 'dfgh')
                }
            }
        })
        console.log(vm.user) //zs

        //改变user的值
        // 方法一 // vm.$set(设置的对象, 设置的属性, 设置的值)
        vm.$set(vm, 'user', 'sss')

        // 方法二 Vue.set(实例.$data,属性名，属性值)
        Vue.set(vm.$data, 'user', 'ssssssdf')

        // 合并属性
        vm.obj = Object.assign({}, vm.obj, {
            name: 'lili',
            age: 12
        })
    </script>
</body>

</html>